<template>
  <div id="artist">
    <div class="main_content">
      <h1>{{ artist.name }}</h1>
      <div class="artist_img">
        <img :src="`${artist.cover}?param=640y300`" style="z-index:1;"/>
        <div class="mask"></div>
        <el-button type="primary" icon="el-icon-folder-add"
                   style="position:absolute;bottom:18px;right:18px;z-index:9999;">收藏
        </el-button>
      </div>
      <ul>
        <li :class="{ 'active': flag == 1 }"
            @click="$router.push(`/artist/artistpopwork?id=${$route.query.id}&flag=1`)">
          <a>热门作品</a>
        </li>
        <li :class="{ 'active': flag == 2 }"
            @click="$router.push(`/artist/artistallalbums?id=${$route.query.id}&flag=2`)">
          <a>所有专辑</a>
        </li>
        <li :class="{ 'active': flag == 3 }"
            @click="$router.push(`/artist/artistIntroduction?id=${$route.query.id}&flag=3&name=${artist.name}`)">
          <a>艺人介绍</a>
        </li>
      </ul>
      <div class="router_wrap">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
    <ArtistRightside :id="$route.query.id"/>
  </div>
</template>

<script>
import ArtistRightside from './ArtistRightside'

export default {
  name: 'Artist',
  components: {
    ArtistRightside
  },
  data() {
    return {
      artist: {},
    }
  },
  mounted() {
    this.$API.artistDetail(this.$route.query.id).then(res => {
      if (res.data.code === 200) {
        this.artist = res.data.data.artist;
      }
    })
  },
  computed: {
    flag() { // 标识当前页面
      return (this.$route.query.flag || 1) * 1;
    }
  },
  watch: {
    // 监视路由变化，更新数据
    '$route'() {
      this.$API.artistDetail(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          this.artist = res.data.data.artist;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

#artist {
  width: fit-content;
  background-color: #fff;
  display: flex;
  flex-flow: row nowrap;

  .main_content {
    width: 750px;
    padding: 20px 0 0 40px;
    border: {
      left: 1px solid #eee;
      right: 1px solid #eee;
      bottom: 1px solid #eee;
    };

    h1 {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 400;
    }

    .artist_img {
      margin: 10px 0 0 0;
      position: relative;
      width: 640px;
      height: 300px;

      .mask {
        background: url('https://s2.music.126.net/style/web2/img/ban_mask.png?24d17f78ddb8eb6e354ce4b4fc38fb3a') no-repeat;
        z-index: 999;
        width: 640px;
        height: 100%;
        position: absolute;
        top: 0px;
      }
    }

    ul {
      display: flex;
      flex-flow: row nowrap;
      background-color: #f8f8f8;
      width: 640px;

      li {
        width: 130px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top: 2px solid #eee;
        font-size: 14px;
        color: #333;
        cursor: pointer;

        &:hover {
          border-top: #C20C0C 2px solid;
        }
      }
    }

    .router_wrap {
      margin: 20px 0 0 0;
      width: 640px;
    }
  }
}

.active {
  border-top: #C20C0C 2px solid !important;
  background-image: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
}
</style>